<template>
    <view>
        <label>用户类型</label>
        <radio-group @change="handleRadioChange">
            <label>
                <radio value="0" :checked="currentValue === '0'" :disabled="isReadOnly" /> 场外
            </label>
            <label>
                <radio value="1" :checked="currentValue === '1'" :disabled="isReadOnly" /> 场内
            </label>
        </radio-group>
        <button @click="toggleReadOnly">开启切换</button>
    </view>
</template>

<script>
import { userUpdateType } from '@/api/login.js'; // 引入后端接口方法

export default {
    props: {
        value: {
            type: String,
            default: '1' // 这里设置了默认值为 '1'，即“场内”会被默认选中
        }
    },
    data() {
        return {
            isReadOnly: true, // 默认只读
            currentValue: this.value // 使用一个新的变量来存储当前值
        };
    },
    watch: {
        value(newVal) {
            this.currentValue = newVal; // 监听 props 的变化，更新 currentValue
        }
    },
    methods: {
        async handleRadioChange(e) {
            this.currentValue = e.mp.detail.value;
        },
        async toggleReadOnly() {
            this.isReadOnly = !this.isReadOnly;
			let currentValue = this.currentValue;
			// 示例：如果当前是 '0'，则修改为 '1'；反之亦然
			if (currentValue === '0') {
				currentValue = '1';
			} else {
				currentValue = '0';
			}
			this.currentValue = currentValue; // 更新 currentValue
			console.log(this.currentValue);
            try {
                const data = {
                    userType: parseInt(this.currentValue)
                };
                console.log(data);
                const response = await userUpdateType(data);
                console.log('用户类型修改成功', response);
            } catch (error) {
                console.error('用户类型修改失败', error);
            }
            this.isReadOnly = !this.isReadOnly;
        }
    }
};
</script>

<style scoped>
    label {
        color: #555; /* 加深文字颜色 */
        font-size: 14px;
    }
</style>